<template>
    <div class="officer ">
       <!-- 商品第一部分 -->
       <router-link class="officer-one" v-for="item in getsuzu" :key="item.id " :to="'/one/comtyone/'+item.id" tag="div">
         <img :src="item.img_url"> 
         <h3 class="officer-twe">{{item.title}}</h3>
         <div class="officer-three">
          <p class="four">
            <span class="four-one">{{item.sell_price}}</span>
            <span class="four-twe">{{item.market_price}}</span>
          </p>
          <p class="twe">
            <span class="twe-one">热卖中</span>
            <span class="twe-twe">仅剩{{item.stock_quantity}}件</span>
          </p>
         </div>
       </router-link>
       <!-- 商品第一部分 -->
      <mt-button type="danger" size="large" plain @click="getupload">加载更多</mt-button>
    </div>
</template>
<script>
export default {
    data(){
     return{
       pageindex:1,
       getsuzu:[]
     }
    },
    created() {
      this. getofficer();
    //  this. getupload()
    },
    methods:{
      getofficer(){
        this.$http.get("api/getgoods?pageindex="+this.pageindex).then(result=>{
          // console.log(result);
           if(result.body.status===0){
               //this.getsuzu=result.body.message
               this.getsuzu=this.getsuzu.concat(result.body.message)
				 } 
        })
      },
      getupload(){
        
        this.pageindex++;
        this.getofficer()
      }
    }
}
</script>
<style lang="scss" scoped>
*{
    padding:0;
    margin:0;

}
.officer{
  width: 100%;
  display:flex;
  flex-wrap: wrap;
  padding: 0px 5px;
  box-sizing: border-box;
  justify-content: space-between;
  .officer-one{
    width: 49%;
    box-sizing: border-box;
    border: 1px solid #cdcdcd;
    margin: 4px 0;
    img{
      width: 100%;
    }
    h3{
      font-size: 14px;
           text-align: justify;
            padding: 4px;
    }
    .officer-three{
      width: 100%;
      padding: 0 8px;
       box-sizing: border-box;
       p{
         display:flex;
         justify-content: space-between;
       }
       .four{
        .four-one{
        font-size: 18px;
        color: red;
         }
        .four-twe{
          font-size: 12px;
           color: #999;
           //line-through给钱——
           text-decoration:line-through;
        }

         
       }
       .twe{
           span:nth-child(1){
                   color:rgba(255, 15, 9, 1);
               }
       }
    }

  }
}
</style>
